import React, {Component, createRef} from 'react';
import './index.css'
import {nanoid} from "nanoid";

class Header extends Component {

  handleInput = e => {
    const value = e.target.value
    if (e.keyCode === 13 && value.trim()) {
      this.props.addTodo({id: nanoid(), title: value, done: false})
      e.target.value = ''
    }
  }

  render() {
    return (
      <div className="todo-header">
        <input type="text" placeholder="请输入你的任务名称，按回车键确认"
               onKeyUp={this.handleInput}/>
      </div>
    );
  }
}

export default Header;